<template>
  <a-row class="h100 appUpdateRichShowComp">
    <a-col :md="6" class="h100 appUpdateRichShowLeft">
      <full-parent-dom-with-dask :loading="loadingBaseInfo"></full-parent-dom-with-dask>
      <h5 class="appUpdateRichShowLeftTitle">{{ $t('sotaApp') }} ：</h5>
      <ul class="appItems">
        <li
          class="appItemName"
          :class="{ active: activeAppIndex === index }"
          v-for="(app, index) in appLists"
          :key="app.ecuId"
          @click="activeAppIndex = index"
        >
          <i class="iconfont" :class="[statusIcons[app.status].name, statusIcons[app.status].class]"></i>
          <span>
            <table-ellipsis
              :tableEllipsisIsTurnLine="false"
              :text="`${app.softwareName}[${app.ecuName}]`"
            ></table-ellipsis>
          </span>
        </li>
        <li class="appItemName" v-if="loadingBaseInfo === false && appLists.length === 0">{{ $t('noData') }}</li>
      </ul>
    </a-col>
    <a-col :md="18" class="h100 appUpdateRichShowRight">
      <!-- 基本信息描述start -->
      <div class="appUpdateRichShowRightTop">
        <full-parent-dom-with-dask :loading="loadingBaseInfo"></full-parent-dom-with-dask>
        <div class="top1">
          <div class="descItem">
            <span class="descTitle">{{ $t('applicationName') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeAppInfo.softwareName || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('sjysbb') }}</span>
            <span class="descValue">
              <table-ellipsis :text="activeAppInfo.sourceVersionName || '-'"></table-ellipsis>
            </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('sjkssj') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getDateMinuteStr(activeAppInfo.startTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="top2">
          <div class="descItem">
            <span class="descTitle">{{ $t('packageNames') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeAppInfo.softwareDid || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('sjmbbb') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="activeAppInfo.targetVersionName || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('sjjssj') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getDateMinuteStr(activeAppInfo.endTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="top3">
          <div class="descItem">
            <span class="descTitle">&nbsp;&nbsp;</span>
            <span class="descValue"> &nbsp;&nbsp; </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('updateState') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="taskEcuUpdateDictCodeObj[activeAppInfo.status] || '-'"
              ></table-ellipsis>
            </span>
          </div>
          <div class="descItem">
            <span class="descTitle">{{ $t('updateDuration') }}</span>
            <span class="descValue">
              <table-ellipsis
                :tableEllipsisIsTurnLine="false"
                :text="$commonFun.getTwoDateDiff(activeAppInfo.startTime, activeAppInfo.endTime)"
              ></table-ellipsis>
            </span>
          </div>
        </div>
      </div>
      <!-- 基本信息描述end -->
      <!-- 第N次升级情况 -->
      <div class="appUpdateRichShowRightBottom">
        <full-parent-dom-with-dask :loading="loadingTimeUpdateData"></full-parent-dom-with-dask>
        <div class="bottomLeft">
          <p
            class="updateTimeItem"
            :class="{ active: activeUpdateTimeIndex === index }"
            v-for="(item, index) in timeUpdateData"
            :key="index"
            @click="activeUpdateTimeIndex = index"
          >
            {{ $t('timeN').replace('N', index + 1) }}
          </p>
          <p class="updateTimeItem" v-if="timeUpdateData.length === 0">{{ $t('noData') }}</p>
        </div>
        <div class="bottomRight commonTableSty">
          <s-table
            class="h100"
            :columns="columns"
            :data-source="activeTimeUpdateTbData"
            :showPagination="false"
            row-key="traceId"
          >
            <template #updateLevel="text, record">
              <table-ellipsis :text="getUpdateLevel(record.operationType)"></table-ellipsis>
            </template>
            <template #updateState="text, record">
              <table-ellipsis
                :text="
                  taskEcuUpdateDictCodeObj[record.appStatus] +
                    '(' +
                    (taskOperationTypeDictCodeObj[record.operationType] || '-') +
                    ')'
                "
              ></table-ellipsis>
            </template>
            <template #startTime="text">
              <table-ellipsis :text="$commonFun.getDateMinuteStr(text)"></table-ellipsis>
            </template>
            <template #endTime="text">
              <table-ellipsis :text="$commonFun.getDateMinuteStr(text)"></table-ellipsis>
            </template>
          </s-table>
        </div>
      </div>
    </a-col>
  </a-row>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { richShowTbColumns } from './config/list'
import taskApi from '@/api/modules/task'
import { STable } from '@/components'
export default {
  components: {
    TableEllipsis,
    FullParentDomWithDask,
    STable
  },
  props: {
    loadingBaseInfo: {
      type: Boolean,
      default: false
    },
    appLists: {
      type: Array,
      default () {
        return []
      }
    },
    query: {
      type: Object,
      default () {
        return {
          taskIds: '',
          vehicleId: ''
        }
      }
    },
    time: {
      type: Number,
      default: 1587421
    }
  },
  computed: {
    activeAppInfo () {
      if (this.appLists[this.activeAppIndex]) {
        return this.appLists[this.activeAppIndex]
      }
      return {}
    },
    // 当前第N次升级过去表
    activeTimeUpdateTbData () {
      if (this.timeUpdateData[this.activeUpdateTimeIndex]) {
        return this.timeUpdateData[this.activeUpdateTimeIndex].upgrades
      }
      return []
    },
    taskEcuUpdateDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskEcuUpdateDictCode')
    },
    taskOperationTypeDictCodeObj () {
      return this.$store.getters.getDictCodeObj('taskOperationTypeDictCode')
    },
    packageTypesObj () {
      return this.$store.getters.getDictCodeObj('packageTypes')
    }
  },
  data () {
    return {
      columns: richShowTbColumns,
      // 当前app序列号
      activeAppIndex: 0,
      statusIcons: {
        9: {
          name: 'icon-chenggong',
          title: '升级成功',
          class: 'successIcon'
        },
        2: {
          name: 'icon-jinhangzhong2',
          title: '正在升级',
          class: 'inIcon'
        },
        8: {
          name: 'icon-shibai-yin',
          title: '升级失败',
          class: 'failIcon'
        }
      },
      loadingTimeUpdateData: false,
      // n次升级信息
      timeUpdateData: [],
      // 当前是第几次的序列号
      activeUpdateTimeIndex: -1
    }
  },
  watch: {
    time: {
      handler () {
        this.getAppUpdateTimeInfo()
      },
      immediate: true
    }
  },
  created () {
    this.getPageDictData()
  },
  methods: {
    // 获取app第n次升级情况
    getAppUpdateTimeInfo () {
      this.timeUpdateData = []
      this.activeUpdateTimeIndex = 0
      if (!this.activeAppInfo.softwareDid) {
        return
      }
      const query = {
        softwareDid: this.activeAppInfo.softwareDid,
        taskId: this.query.taskIds,
        vehicleId: this.query.vehicleId
      }
      this.loadingTimeUpdateData = true
      taskApi
        .getVehicleAppDetail(query)
        .then((res) => {
          if (res.data.length) {
            this.timeUpdateData = res.data
            this.activeUpdateTimeIndex = 0
          }
        })
        .finally(() => {
          this.loadingTimeUpdateData = false
        })
    },
    getUpdateLevel (status) {
      // eslint-disable-next-line no-param-reassign
      status *= 1
      if (!status) {
        return '-'
      }
      if (status < 20) {
        return this.$t('checkLevel')
      }
      if (status < 40) {
        return this.$t('downLevel')
      }
      return this.$t('updateLevel')
    },
    getPageDictData () {
      ;['getTaskOperationTypeDictCodeData', 'getTaskEcuUpdateDictCodeData'].forEach((method) => {
        this.$store.dispatch(method)
      })
    },
    resetPageData () {}
  }
}
</script>
<style lang="less" scoped>
.appUpdateRichShowComp {
  .appUpdateRichShowLeft {
    padding-top: 20px;
    position: relative;
    border-right: 1px solid @borderColor;
    padding-left: 24px;
    overflow: auto;
    .appUpdateRichShowLeftTitle {
      font-weight: bold;
      margin-bottom: 5px;
      font-size: 1.1em;
    }
    .appItemName {
      height: 41px;
      line-height: 41px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-right: 20px;
      > span {
        margin-left: 5px;
        flex: 1 0 0;
        font-size: 1em;
      }
      &:hover {
        background-color: @blockHoverBgColor;
      }
      &.active {
        color: @blockHoverTextColor;
      }
    }
    .successIcon {
      color: #2bb080;
    }
    .inIcon {
      color: @primary-color;
    }
    .failIcon {
      color: #d81e06;
    }
  }
  .appUpdateRichShowRight {
    display: flex;
    flex-direction: column;
  }

  .appUpdateRichShowRightTop {
    position: relative;
    flex: none;
    padding: 15px 20px;
    min-height: 100px;
    border-bottom: 1px solid @borderColor;
    display: flex;
    justify-content: space-between;
    .top1 {
      flex: 32% 0 0;
    }
    .top2 {
      flex: 38% 0 0;
    }
    .top3 {
      flex: 26% 0 0;
    }
    .descItem {
      padding: 5px 0;
      font-size: 0.9em;
      display: flex;
    }
    .descTitle {
      font-weight: bold;
      flex: 100px 0 0;
    }
    .descValue {
      flex: 1 0 0;
      font-size: 1em;
    }
  }
  .appUpdateRichShowRightBottom {
    position: relative;
    flex: 1 0 0;
    display: flex;
    overflow: hidden;
    .bottomLeft {
      width: 140px;
      border-right: 1px solid @borderColor;
      padding: 20px 0;
      height: 100%;
      overflow-y: auto;
    }
    .updateTimeItem {
      height: 41px;
      line-height: 41px;
      padding: 0 20px;
      cursor: pointer;
      &:hover {
        background-color: @blockHoverBgColor;
      }
      &.active {
        color: @blockHoverTextColor;
      }
    }
    .bottomRight {
      flex: 1 0 0;
      padding: 20px;
    }
  }
}
</style>
